<div class="container">
  <div class="row">
    <div class="col">
      <h1 class="d-none d-sm-block h3 mb-4 text-center" i18n>Accounts</h1>
      <gf-accounts-table
        [accounts]="accounts"
        [baseCurrency]="user?.settings?.baseCurrency"
        [deviceType]="deviceType"
        [locale]="user?.settings?.locale"
        [showActions]="
          !hasImpersonationId &&
          hasPermissionToUpdateAccount &&
          !user.settings.isRestrictedView
        "
        [totalBalanceInBaseCurrency]="totalBalanceInBaseCurrency"
        [totalValueInBaseCurrency]="totalValueInBaseCurrency"
        [transactionCount]="transactionCount"
        (accountDeleted)="onDeleteAccount($event)"
        (accountToUpdate)="onUpdateAccount($event)"
        (transferBalance)="onTransferBalance()"
      />
    </div>
  </div>

  @if (
    !hasImpersonationId &&
    hasPermissionToCreateAccount &&
    !user.settings.isRestrictedView
  ) {
    <div class="fab-container">
      <a
        class="align-items-center d-flex justify-content-center"
        color="primary"
        mat-fab
        [queryParams]="{ createDialog: true }"
        [routerLink]="[]"
      >
        <ion-icon name="add-outline" size="large" />
      </a>
    </div>
  }
</div>
